<template>
    <div class="step-header">
        <!-- 左： -->
        <div class="side left" v-if="current > 0">
            <a-button @click="$emit('prev')">上一步</a-button>
        </div>

        <!-- 中：步骤条 -->
        <div class="center">
            <a-steps :current="current" labelPlacement="vertical" class="steps">
                <a-step title="基础信息" />
                <a-step title="生产源选择" />
                <a-step title="索引映射" />
                <a-step title="发布" />
            </a-steps>
        </div>

        <!-- 右：下一步 -->
        <div class="side right" v-if="current < 3">
            <a-button type="primary" :disabled="nextDisabled" @click="$emit('next')">下一步</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    current: number
    nextDisabled: boolean
}>()
</script>

<style scoped lang="less">
@border-light: #f0f0f0;

.step-header {
    position: relative;
    height: 76px;
    display: block;
    background: #fff;
    border-bottom: 1px solid @border-light;
}

/* 左右按钮绝对定位 */
.side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left {
    left: 16px;
}

.right {
    right: 16px;
}

/* 中心区域真正居中 */
.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    --side-safe: 140px;
    width: calc(100% - var(--side-safe) * 2);
    max-width: 980px;
    min-width: 320px;
}

/* 步骤条宽度限制 */
.steps :deep(.ant-steps) {
    width: 100%;
}
</style>
